package com.example.myapplication.ui.components


import androidx.compose.runtime.Composable
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.myapplication.ViewModel.TaskViewModel

@Composable
fun CircleRing(boxWithDp: Int, vm: TaskViewModel = viewModel()) {
    Canvas(modifier = Modifier.size(boxWithDp.dp)) {

        val strokeWidth = 30f

        // 扇形
        // startAngle 起始角度
        // sweepAngle 扇形角度
        // useCenter为true两条边会连接
        // Stroke 设置边框
        // StrokeCap.Round设置圆角边框
        // rotate 旋转
        rotate(180f) {
            drawArc(
                Color(0, 0, 0, 15),
                startAngle = -10f,
                sweepAngle = 200f,
                useCenter = false,
                style = Stroke(strokeWidth, cap = StrokeCap.Round)
            )

            drawArc(
                Color.White,
                startAngle = -10f,
                sweepAngle = vm.pointOfYearPercent,
                useCenter = false,
                style = Stroke(strokeWidth, cap = StrokeCap.Round)
            )
        }
    }
}


